<template>
    <div class="industry-chart" ref="chartContainer">
      <div v-if="isEmptyData" class="empty-tip">暂无行业分布数据</div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';

const INDUSTRY_COLORS = [
    { start: '#6C5CE7', end: '#A66EFA' },  // 紫色系
    { start: '#FFB74D', end: '#FF9800' },  // 橙色系
    { start: '#4DD0E1', end: '#00ACC1' },  // 青色系
    { start: '#81C784', end: '#4CAF50' },  // 草绿色系
    { start: '#FF8A65', end: '#FF7043' },  // 珊瑚色系
    { start: '#BA68C8', end: '#9C27B0' }   // 品红色系
  ];
  
export default {
    name: 'IndustryPie',
    props: {
      chartData: {
        type: Array,
        required: true,
        default: () => [],
        validator: data => data.every(item => 
          'industry' in item &&
          'employedNum' in item &&
          'avgSalary' in item
        )
      }
    },
    data() {
      return {
        chart: null
      };
    },
    computed: {
      isEmptyData() {
        return this.chartData.length === 0;
      }
    },
    mounted() {
      this.$nextTick(this.initChart);
      window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
      if (this.chart) this.chart.dispose();
    },
    methods: {
      initChart() {
        if (this.isEmptyData) return;
        
        this.chart = echarts.init(this.$refs.chartContainer,null,{
            height: 450
        });
        this.updateChart();
      },
  
      handleResize() {
        if (this.chart) this.chart.resize();
      },
  
      generateGradient(index) {
        const colors = INDUSTRY_COLORS[index % INDUSTRY_COLORS.length];
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors.start },
          { offset: 1, color: colors.end }
        ]);
      },
  
      updateChart() {
        if (!this.chart || this.isEmptyData) return;
  
        const totalEmployed = this.chartData.reduce((sum, item) => sum + item.employedNum, 0);
  
        const option = {
          title: {
            text: '毕业生就业行业分布',
            left: 'center',
            textStyle: {
              fontSize: 18,
              color: '#2c3e50'
            }
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.85)',
            borderWidth: 0,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            formatter: ({ name, value, percent }) => {
              const industryData = this.chartData.find(d => d.industry === name);
              const salary = industryData?.avgSalary?.toFixed(2) || 'N/A';
              return `
                ${name}<br>
                就业人数: ${value.toLocaleString()}<br>
                占比: ${percent}%<br>
                平均薪资: ¥${salary}
              `;
            }
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 20,
            top: 60,
            itemGap: 10,
            textStyle: {
              color: '#666'
            },
            pageIconColor: '#6C5CE7',
            pageTextStyle: {
              color: '#666'
            }
          },
          series: [{
            name: '行业分布',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              formatter: ({ name, percent }) => 
                `${name}\n${percent}%`,
              fontSize: 12,
              color: '#444'
            },
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: this.chartData.map((item, index) => ({
              name: item.industry,
              value: item.employedNum,
              itemStyle: {
                color: this.generateGradient(index)
              }
            })),
            animationType: 'scale',
            animationEasing: 'backOut',
            animationDuration: 1200
          }]
        };
  
        this.chart.setOption(option);
      }
    },
    watch: {
      chartData: {
        handler() {
          if (this.isEmptyData && this.chart) {
            this.chart.dispose();
            this.chart = null;
          } else if (!this.chart) {
            this.initChart();
          } else {
            this.updateChart();
          }
        },
        deep: true
      }
    }
  };
  </script>
  
  <style scoped>
  .industry-chart {
    margin-top: 5px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    position: relative;
  }
  
  .empty-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 16px;
  }
  </style>